<!-- 封装VanFieldCheckbox多选组件 -->
<template>
  <div>
    <Navbar :appTitle="appTitle" />
    <div class="list">
      <van-list v-model="loading" :finished="finished" finished-text="" @load="onLoad">
        <div>
          <div v-for="(item, index) in dataSource" :key="index" class="wrap">
            <div>
              <slot name="body" :item="item" :index="index">
                <div class="center">
                  <div>
                    <p>
                      {{ item.goodsName }}
                    </p>
                    <p>批号：{{ item.batchCode }}</p>
                  </div>
                  <canvas ref="qrcodeCanvas"></canvas>
                </div>
              </slot>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="actionWrap">
      <van-field :formatter="(e) => clearNoNum(e)" style="flex:1" v-model="printNum" type="number" placeholder="请输入"
        input-align="right">
      </van-field>
      <div class="unit">
        份
      </div>
      <van-button style="flex:6" @click="printpage" color="#1890ff" size="large">打印</van-button>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from "@/api/manage";
import Navbar from "@/components/navBar/navBar_right";
import store from "@/store";
import QRCode from "qrcode";
export default {
  name: "printList",
  components: {
    Navbar,
  },
  data() {
    return {
      printNum: 1,
      appTitle: "预览物品标签",
      loading: false,
      finished: false,
      pageNo: 1, //页码
      pageSize: 30,
      queryParam: {}, //查询条件
      dataSource: [], //列表数据
      columns: {
        content: [
          {
            name: "物品名称",
            key: ["goodsName"],
          },
          {
            name: "规格",
            key: ["spec"],
            style: { width: "1.2rem" },
          },
          {
            name: "包装规格",
            key: ["packageSpec"],
          },
          {
            name: "批号",
            key: ["batchCode"],
            style: { width: "1.2rem" },
          },
          {
            name: "产地",
            key: ["address"],
            style: { width: "1.2rem" },
          },
          {
            name: "生产日期",
            key: ["produceDate"],
          },
        ],
      },
      listUrl: "/inOutDocument/wmsWarehouseOperate/queryInBoundGoodsInfoById",
      minLen: 6,
      usedGetMethods: true,
    };
  },
  created() {
    store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
  },
  methods: {
    clearNoNum(value) {
      if (value != '') {
        if (Number(value) < 0) {
          value = 1
        }
      }
      return value;
    },
    // 判断是否为空
    checkValue(v) {
      if (v ?? "" !== "") {
        return v;
      } else {
        return v === 0 ? v : "-";
      }
    },
    // 获取列表数据
    onLoad(pageNo) {
      let id = this.$route.query.id;
      let taskId = this.$route.query.taskId;
      let detailId = this.$route.query.detailId;

      if (!detailId) {
        if (id) {
          // 自form表单页
          this.queryParam["id"] = id;
          this.listUrl =
            "/inOutDocument/wmsWarehouseOperate/queryInBoundGoodsInfoById";
        }
        if (taskId) {
          // 自详情页
          this.queryParam["taskId"] = taskId;
          this.listUrl = "/inbound/shelvesTask/shelvedInfoListByGoods";
        }
      } else {
        if (id && detailId) {
          // 自form表单页 单个商品
          this.queryParam["taskId"] = id;
          this.queryParam["detailIds"] = detailId;
          this.listUrl = "/inbound/shelvesTask/printGoodsInfo";
        }
      }

      if (!this.listUrl) {
        this.$toast("请设置url.list属性!");
        return;
      }
      if (pageNo === 1) {
        this.pageNo = 1;
        this.dataSource = [];
      }

      let par = {
        ...this.queryParam,
        ...{ pageNo: this.pageNo, pageSize: this.pageSize },
      };
      this.loading = true;
      let getDatafunction = this.usedGetMethods ? getAction : postAction;
      getDatafunction(this.listUrl, par)
        .then((res) => {
          if (res.code == 200) {
            let dataList = [];
            if (taskId) {
              dataList = res.result.unShelvedGoodsList;
            } else {
              dataList = res.result;
            }

            this.dataSource = dataList.map((ele) => {
              return {
                ...ele,
                spec: ele.goodsSpec || ele.spec,
              };
            });

            this.finished = true;
            this.loading = false;

            this.$nextTick(() => {
              this.dataSource.forEach((ele, index) => {
                QRCode.toCanvas(
                  this.$refs.qrcodeCanvas[index],
                  JSON.stringify({
                    EntityType: "goods",
                    id: ele.goodsId,
                    batchCode: ele.batchCode
                  }),
                  {
                    width: 120,
                    height: 120,
                  },
                  (error) => {
                    if (error) console.error(error);
                  }
                );
              });
            });
          } else {
            this.$toast(res.message);
            this.loading = false;
            this.finished = true;
          }
        })
        .catch((e) => {
          this.loading = false;
          this.finished = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    printpage() {
      document.addEventListener("deviceready", () => {
        JXPrintPlugin.connectPrinter(
          () => {
            for (let index = 0; index < this.printNum; index++) {
              this.dataSource.forEach((item) => {
                try {
                  JXPrintPlugin.searchGap();
                  JXPrintPlugin.setPaperBack([8]);
                  JXPrintPlugin.printText([`${item.goodsName}\n`]);
                  JXPrintPlugin.printText([`批号：${item.batchCode}\n`]);
                  JXPrintPlugin.printBarCode([
                    9,
                    0,
                    76,
                    0.5,
                    JSON.stringify({
                      EntityType: "goods",
                      id: item.goodsId,
                      batchCode: item.batchCode
                    }),
                  ]);
                } catch (error) {
                  this.$toast("打印异常");
                }
              });
            }
            JXPrintPlugin.searchGap();
          },
          () => {
            this.$toast("连接打印机失败");
          }
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  height: calc(100vh - 185px);
  overflow-y: scroll;

  .wrap {
    background: #fff;
    margin: 50px 60px;
    padding: 32px;
    position: relative;

    canvas {
      // margin-top: 1.7rem;
    }

    .top {
      display: flex;
      justify-content: flex-start;

      .icon {
        width: 6px;
        height: 32px;
        background: #1890ff;
        margin-top: 6px;
        margin-right: 20px;
      }

      .title {
        text-align: center;
        font-weight: bolder;
        font-size: 32px;
        font-family: PingFang SC;
        color: #191f25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .titleWidth {
        width: 572px;
        margin-left: 24px;
      }

      .spot img {
        width: 40px;
        height: 40px;
      }
    }

    .center {

      // display: flex;
      p {
        margin: 16px 25px;
        font-size: 28px;
        display: flex;
        position: relative;

        .key {
          width: 2rem;
          color: #888888;
        }

        .value {
          width: 2.2rem;
          color: #191f25;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .showAll {
        background: #f5f8ff;
        width: 100vw;
        margin-left: -30px;
        padding: 30px;
        margin-bottom: 30px;
      }

      .showAll2 {
        width: 100%;
        margin: 0 0 30px 0;
        padding: 30px 0;
      }
    }

    .label {
      margin-left: -6px;
      margin-top: -20px;

      span {
        height: 32px;
        background: #f0f6fe;
        color: #1890ff;
        margin-right: 20px;
        padding: 6px 16px;
        font-size: 22px;
        border-radius: 6px;
      }
    }

    .foot {
      // height: 0.33rem;
      // line-height: 0.33rem;
      display: flex;
      justify-content: space-between;
      // margin: 0.15rem 0.12rem 0 0.12rem;
      font-size: 28px;

      .pictures {
        width: 66px;
        height: 66px;
        line-height: 66px;
        text-align: center;
        color: #fff;
        background: #1890ff;
        display: block;
        border-radius: 12px;
        font-size: 24px;
        margin-right: 20px;
      }

      .text {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .opera {
        color: #1890ff;
        font-size: 28px;
      }
    }
  }
}

// 全选样式
.operation {
  width: 100%;
  height: 100px;
  line-height: 100px;
  position: fixed;
  bottom: 0;
  background: #ffff;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  font-size: 28px;
  font-weight: 500;
  color: #191f25;

  .img1 {
    width: 40px;
    height: 40px;
    margin-top: -10px;
  }

  .img2 {
    width: 44px;
    height: 44px;
    margin-top: -10px;
  }

  .imgSpan {
    margin-left: 10px;
  }

  .selectedSpan {
    font-size: 24px;
    color: #1890ff;
  }

  .info {
    width: 200px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }

  .singel-info {
    width: 65%;
    height: 78px;
    line-height: 78px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-radius: 4px;
    font-size: 32px;
    margin-top: 12px;
  }

  .btncancel {
    width: 200px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }
}

// 底部操作弹窗样式
.actionWrap {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  background: #fff;
  text-align: center;

  .van-button--large {
    width: 98%;
    height: 80px;
    margin: 10px;
  }

  .unit {
    flex: 0.5;
    font-size: 30px;
  }
}
</style>
